<template>
  <div class="tab-child">
    <form
      autocomplete="off"
      @submit.prevent="onSubmit"
    >
      <div class="box1 Mem-acc-num">
        <span>用户名</span>
        <input
          type="text"
          name="userPhone"
          v-model="user.userName"
          @blur="checkName"
        >
        <span class="isOk">{{user.name}}</span>
      </div>
      <div class="box1 password">
        <span>密码</span>
        <input
          :type="pwdType"
          name="userPassword"
          class="pwd"
          v-model="user.userPassword"
          @blur="checkPwd"
        >
        <span class="see" @click="seePwd"><img :src="seen?openeye:nopeneye" alt=""></span>
        <span class="isOk">{{user.pwd}}</span>
      </div>
      <div class="box2">
        <label for="rempwd">
          <input type="checkbox" id="rempwd" v-model="remember">
          <div></div>
          <span class="rem">记住密码</span>
        </label>
        <span class="forget">忘记密码?</span>
      </div>
      <input type="submit" value="确认登录" class="sure">
    </form>
    <div class="box3">
      <div class="title"></div>
      <span>第三方登录</span>
      <div class="title"></div>
    </div>
    <div class="box4">
      <span><img src="~@/assets/img/QQ.png" alt=""></span>
      <span class="center"><img src="~@/assets/img/wechart.png" alt=""></span>
      <span><img src="~@/assets/img/Alipay.png" alt=""></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      user: {
        userPassword: '',
        pwd: '',
        userName: '',
        name: ''
      },
      remember: '',
      url: '',
      pwdType: 'password',
      seen: '',
      openeye: require('@/assets/img/kysee.png'),
      nopeneye: require('@/assets/img/see.png')
    }
  },
  created () {
    // 在页面加载时从localStorage获取登录信息
    const username = localStorage.getItem('userName')
    const password = localStorage.getItem('userPassword')
    // 如果存在赋值给表单，并且将记住密码勾选
    if (username && password) {
      this.user.userName = username
      this.user.userPassword = password
      this.remember = true
    }
  },
  methods: {
    seePwd () {
      this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
      this.seen = !this.seen
    },
    // 验证用户名
    checkName () {
      if (this.user.userName.length === 0) {
        this.user.name = '用户名不能为空'
        return false
      } else {
        this.user.name = ''
        return true
      }
    },
    // 验证密码
    checkPwd () {
      const word = this.user.userPassword.trim()
      if (word.length === 0) {
        this.user.pwd = '密码不能为空'
        return false
      } else if (!/^(\w){6,20}$/.exec(word)) {
        this.user.pwd = '输入6-20个字母、数字、下划线'
        return false
      } else {
        this.user.pwd = ''
        return true
      }
    },
    onSubmit () {
      const formMess = { userName: this.user.userName, userPassword: this.user.userPassword }
      this.$store.dispatch('loginAsync', formMess)
        .then(res => {
          this.$router.push('/')
          this.setUserInfo()
          location.reload()
        }).catch(err => {
          console.log(err)
        })
    },
    setUserInfo () { // 判断checkbox状态
      if (this.remember) {
        localStorage.setItem('userName', this.user.userName)
        localStorage.setItem('userPassword', this.user.userPassword)
        sessionStorage.setItem('userName', this.user.userName)
        sessionStorage.setItem('userPassword', this.user.userPassword)
      } else {
        sessionStorage.setItem('userName', this.user.userName)
        sessionStorage.setItem('userPassword', this.user.userPassword)
        localStorage.removeItem('userName')
        localStorage.removeItem('userPassword')
      }
    }
  }
  // beforeRouteEnter (to, from, next) {
  //   console.log('路由小信息', from)
  //   next(vm => {
  //     // 通过 `vm` 访问组件实例,将值传入oldUrl
  //     vm.oldUrl = from.fullPath
  //   })
  // },
  // mounted () {
  //   this.$nextTick(() => {
  //     // 验证是否获取到了上页的url
  //     /* eslint-disable no-console */
  //     console.log('路由信息', this.oldUrl)
  //     this.url = this.oldUrl
  //   })
  // }
}
</script>

<style lang="scss" scoped src="./login.scss">
</style>
